<template>
  <div style="background-image: url('http://139.224.244.252:9006/file/qxx%2F3.jpg');
              background-size: cover;
              background-position: center;
              padding: 20px;
              height: 400px;
              border-radius: 10px;
              box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
              color: white;
              position: relative;">

    <span style="display: block;color: #1e1e1e; margin-bottom: 20px; font-size: 28px; font-weight: bold; text-align: center;">派单设置</span>

    <div style="margin-left: 20px;">
      <label style="display: block;color: #f4516c; margin-bottom: 20px;font-size: 20px">
        <input type="radio" name="dispatch" value="manual" v-model="typePai" @change="showMessage('人工派单方式')"> 人工派单
      </label>

      <label style="display: block;color: #f4516c; margin-bottom: 20px;font-size: 20px">
        <input type="radio" name="dispatch" value="automatic" v-model="typePai" @change="showMessage('自动派单方式')"> 自动派单
      </label>

      <label style="display: block;color: #f4516c; margin-bottom: 30px;font-size: 20px">
        <input type="radio" name="dispatch" value="mixed" v-model="typePai" @change="showMessage('人工+自动派单方式')"> 人工+自动
      </label>
    </div>

    <div v-if="message" class="message-box">
      {{ message }}
    </div>

    <div style="margin-left: 20px; margin-top: 20px;" v-if="typePai === 'manual'">
      <span style="color: red; font-weight: bold;">人工派单说明：</span><br>
      <span style="color: #1e1e1e">保修单默认为未受理状态，由受理员进行受理和进行派单操作</span>
    </div>

    <div style="margin-left: 20px; margin-top: 20px;" v-if="typePai === 'automatic'">
      <span style="color: red; font-weight: bold;">自动派单说明：</span><br>
      <span style="color: #1e1e1e">保修单将由系统自动处理，请确保信息完整</span>
    </div>

    <div style="margin-left: 20px; margin-top: 20px;" v-if="typePai === 'mixed'">
      <span style="color: red; font-weight: bold;">人工+自动派单说明：</span><br>
      <span style="color: #1e1e1e">人工与自动相结合的派单模式，灵活应对各种情况</span>
    </div>


    <div style="text-align: center; margin-top: 40px;">
      <el-button type="primary" style="margin-right: 20px;">保存</el-button>
      <el-button style="margin-left: 20px;" @click="typePai = ''">取消选择</el-button>
    </div>
  </div>
</template>

<script>
import type from '@/views/wms/type/index.vue'

export default {
  computed: {
    type() {
      return type
    }
  },
  data() {
    return {
      message: '',
      typePai: '',
    };
  },
  methods: {
    showMessage(selection) {
      this.message = `已选择 ${selection}`;
      // 设置定时器，在2秒后清除消息
      setTimeout(() => {
        this.message = '';
      }, 2000);
    }
  }
};
</script>

<style scoped>
.message-box {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 利用transform调整位置到中心 */
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
  color: white;
  border-radius: 10px; /* 圆角效果 */
  animation: fadeOut 2s forwards; /* 使用fadeOut动画 */
}

@keyframes fadeOut {
  0% {
    opacity: 1; /* 开始时完全可见 */
  }
  100% {
    opacity: 0; /* 最后完全隐去 */
  }
}
</style>
